<template>
  <div style="min-height: calc(100vh - 86px);">
    <div style="width: 70%; margin: 10px auto">
 <!-- 上面的区域 -->
      <div style="display: flex; grid-gap: 10px">
        <div style="flex: 1">
          <el-carousel :height="$root.elderMode ? '400px' : '300px'">
            <el-carousel-item v-for="item in imgs" :key="item">
              <img :src="item" alt="" style="width: 100%">
            </el-carousel-item>
          </el-carousel>
        </div>

        <div style="flex: 1">
          <div style="display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px">
            <div @click="loadTopNews('new')" class="top-news" :class="{ 'top-active' : sort === 'new' }">最新资讯</div>
            <div @click="loadTopNews('hot')" class="top-news" :class="{ 'top-active' : sort === 'hot' }">最热资讯</div>
          </div>

          <div style="padding: 0 10px">
            <div @click="$router.push('/front/newsDetail?id=' + item.id)" 
                 v-for="item in topNews" 
                 :key="item.id" 
                 style="display: flex; grid-gap: 10px; margin: 10px 0; cursor: pointer">
              <div style="flex: 1; width: 0;" class="line1" 
                   :style="{ 
                     fontSize: $root.elderMode ? '1.05em' : 'inherit',
                     lineHeight: '1 !important'  // 增加!important强制覆盖
                   }">
                {{ item.title }}
              </div>
              <!-- 只保留一个时间显示元素 -->
              <div style="color: #666;" :style="{ fontSize: $root.elderMode ? '16px' : '13px' }">
                {{ item.time }}
              </div>
            </div>
          </div>
        </div>
      </div>

<!-- 下面的区域 -->
<div style="margin: 20px 0; display: flex; flex-wrap: wrap; gap: 20px; min-height: 300px;">
        <!-- 左边的div -->
        <div style="flex: 1; min-width: 60%; max-width: 100%;">
          <div style="display: flex; margin-bottom: 10px; flex-wrap: wrap; gap: 8px"> <!-- 添加换行和间距 -->
            <div @click="loadCategoryNews(null)" class="category-item" 
                 :class="{'category-active' : category===null}"
                 :style="{ 
                   minWidth: $root.elderMode ? '120px' : '80px',
                   fontSize: $root.elderMode ? '18px' : '14px',  
                   padding: $root.elderMode ? '8px 12px' : '5px 10px'
                 }">
              全部
            </div>
            <div @click="loadCategoryNews(item.name)" 
                 class="category-item elder-mode-item"
                 :class="{'category-active' : item.name===category}" 
                 v-for="item in categoryList" 
                 :key="item.id">
              {{ item.name }}
            </div>
          </div>
          <div>
            <div @click="$router.push('/front/newsDetail?id=' + item.id)" v-for="item in tableData" :key="item.id" class="card" style="display: flex; margin-bottom: 10px; cursor: pointer;">
              <img :src="item.cover" alt="" style="width: 100px; height: 80px; border-radius: 5px">
              <div style="padding-left: 20px;">
                <!-- <div style="margin-bottom: 30px; font-size: 18px" class="line1">{{ item.title }}</div> -->
                <div style="margin-bottom: 30px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" 
     :style="{ 
       fontSize: $root.elderMode ? '24px' : '18px', 
       lineHeight: $root.elderMode ? '1.5' : '1.5'  // 统一行高值
     }">
  {{ item.title }}
</div>
                <div style="font-size: 13px; color: #666;">
                  <el-tag>{{ item.category }}</el-tag> <!-- 标签 -->
                  <span style="margin: 0 20px;">{{ item.time }}</span><!-- 时间 -->
                  <span>阅读 {{item.count}}</span><!-- 阅读量 -->
                </div>
              </div>
            </div>
          </div>

          <div style="margin: 10px 0;" v-if="total > 0">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
          
        </div>
        <!-- 右边的div -->
        <div style="width: 300px; flex-shrink: 0; margin-left: 20px; margin-top: 15px"> <!-- 增加上边距 -->
          <div style=" margin-bottom: 10px;display: flex; align-items: center">
            <div style="flex: 1; font-size: 24px">公益活动</div>
            <a href="/front/activity">更多>></a>
          </div>
          <div class="card">
            <div @click="$router.push('/front/activityDetail?id='+item.id)" style="display: flex; grid-gap: 10px; margin-bottom: 10px; cursor: pointer;" v-for="item in activityList" :key="item.id">
              <img :src="item.cover" alt="" style="width: 60px; height: 50px; border-radius: 5px;">
              <div style="flex: 1;">
                <el-tooltip effect="light" :content="item.name" placement="top">
  <div class="line2" 
       style="height: 40px; margin-bottom: 5px;"
       :style="{ fontSize: $root.elderMode ? '22px' : '16px' }">
    {{ item.name }}
  </div>
</el-tooltip>
                <div style="color: #666; font-size: 13px;">{{ item.start }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      imgs: [
        require('@/assets/imgs/lunbotu/1.jpg'),
        require('@/assets/imgs/lunbotu/2.jpg'),
        require('@/assets/imgs/lunbotu/3.jpg'),
      ],
      sort: 'new',  // hot
      topNews: [],
      categoryList: [],
      category: null,
      pageNum: 1,
      pageSize: this.$root.elderMode ? 3 : 4,  // 根据模式动态设置每页数量
      total: 0,
      tableData: [],
      activityList: []
    }
  },
  // 恢复mounted钩子
  mounted() {
      this.loadTopNews('new')
      this.loadCategory()
      this.loadCategoryNews(null)
      this.loadActivity()
  },
  // 移除所有elderModeChanged事件监听
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadActivity(){
      this.$request.get('/activity/selectPage',{
        params:{
          pageNum:1,
          pageSize: this.$root.elderMode ? 4 : 6  // 根据模式动态设置每页数量
        }
      }).then(res=>{
        this.activityList=res.data?.list || []
      })
    },
    loadCategoryNews(category){
      this.category=category
      this.$request.get('/news/selectPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          category: this.category,
        }
      }).then(res => {
        this.tableData = res.data?.list
        this.total = res.data?.total
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum=pageNum
      this.loadCategoryNews(this.category)
    },
    loadCategory(){
      this.$request.get('/category/selectAll').then(res=>{
        this.categoryList=res.data || []
      })
    },
    loadTopNews(sort) {
      this.sort = sort
      this.$request.get('/news/selectTopNews?sort=' + this.sort).then(res => {
        this.topNews = res.data || []
      })
    },
    loadActivity() {
      this.$request.get('/activity/selectPage',{
        params:{
          pageNum:1,
          pageSize: this.$root.elderMode ? 4 : 6
        }
      }).then(res => {
        this.activityList = res.data?.list || []
        // 添加老年人模式数据截取
        if(this.$root.elderMode) {
          this.activityList = this.activityList.slice(0, 4)
        }
      })
    },
  }
}
</script>

<style scoped>
.top-news {
  padding: 10px;
  cursor: pointer;
  white-space: nowrap; /* 防止文字换行 */
}
.top-active {
  border-bottom: 2px solid #2A60C9
}
.category-item{
  padding: 5px 10px;
  border: 1px solid #333;/*solid表示边框是实线*/
  border-radius: 5px;/*给边框添加5像素的圆角*/
  margin-right: 10px;
  cursor: pointer;/*鼠标移上去鼠标变成小手 */
  /* 新增flex布局设置 */
  flex: 0 0 auto; /* 防止元素收缩 */
  min-width: 80px; /* 设置最小宽度 */
  text-align: center; /* 文字居中 */
}
.category-active {
  border: none;
  background-color: #2A60C9;
  color: #fff;
}
</style>
<div style="display: flex; grid-gap: 10px; flex-wrap: wrap">
  <div style="flex: 1; min-width: 400px">
    <el-carousel :height="$root.elderMode ? '400px' : '300px'">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width:100%;height:100%;object-fit: cover">
        </el-carousel-item>
      </el-carousel>
  </div>

<div style="flex: 1; min-width: 400px; padding: 15px">
  <div style="font-size: 20px; margin-bottom: 25px">
    <div @click="loadTopNews('new')" class="top-news elder-mode-item" :class="{ 'top-active' : sort === 'new' }">最新资讯</div>
    <div @click="loadTopNews('hot')" class="top-news elder-mode-item" :class="{ 'top-active' : sort === 'hot' }">最热资讯</div>
  </div>

<div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 25px">
  <div v-for="item in categoryList" :key="item.id"
       :style="{ 
         padding: $root.elderMode ? '12px 24px' : '8px 16px',
         fontSize: $root.elderMode ? '20px' : '16px',
         marginRight: '15px',
         minWidth: $root.elderMode ? '100px' : 'auto'
       }">
    {{ item.name }}
  </div>
</div>

<div class="card" style="display: grid; grid-template-columns: 150px 1fr; gap: 25px">
  <img :src="item.cover" alt="" 
       style="width:100%;height:120px;object-fit: cover; border-radius: 8px">
  <div>
    <div :style="{ 
      fontSize: $root.elderMode ? '24px' : '18px',
      lineHeight: 1.5,
      marginBottom: '25px'
    }">{{ item.title }}</div>
  </div>
</div>

<div style="width: 100%; max-width: 400px; margin-top: 30px">
  <div style="font-size: 28px; margin-bottom: 25px">公益活动</div>
  <div class="card" style="padding: 20px">
    <div v-for="item in activityList" :key="item.id" 
         style="display: grid; grid-template-columns: 80px 1fr; gap: 15px">
      <img :src="item.cover" alt="" 
           style="width:100%;height:70px;object-fit: cover; border-radius: 6px">
      <div>
        <div :style="{ 
          fontSize: $root.elderMode ? '22px' : '16px',
          lineHeight: 1.4
        }">{{ item.name }}</div>
      </div>
    </div>
  </div>
</div>
